<template>
  <div id="app">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">发布公告</h1>
      <div class="mint-header-button is-right" />
    </header>
    <div style="padding-top:10px;background:#fff">
      <mt-field v-model="annouce.title" label="标题:" placeholder="输入公告标题" />

      <!-- <mt-cell :to="{name:'choose_employee',query: {type:'2', detail: JSON.stringify(annouce)}}" title="
        抄送人" is-link>
      <span v-if="annouce.username<1" style="color:#999999">请选择抄送人</span>
      <span v-else style="color:#999999">{{ annouce.username }}</span>
      <img slot="icon" src="../static/chaosongren.png" width="20" height="20">
      </mt-cell>-->
      <mt-cell :to="{name:'choose_people',query: {type:'2', detail: JSON.stringify(annouce)}}" title="
        通知人" is-link>
        <span v-if="annouce.user.length<1" style="color:#999999">请选择通知人</span>
        <span v-else style="color:#999999">已选{{ annouce.user.length }}人</span>
        <img slot="icon" src="../static/chaosongren.png" width="20" height="20" />
      </mt-cell>
      <picker :picdata="level" class="rd_picker" style="margin-left:0px;" pictitle="公告类型" @getpicval="getlevelval" />
    </div>
    <div style="text-align:center;margin:10px 0;">
      <textarea v-model="annouce.context" style="border: 0; outline: none;padding:10px;width:100%;height:120px;" placeholder="请输入公告内容" rows="4"></textarea>
    </div>
    <div style="padding:10px 0 0 10px;background-color:white">
      <span style="display:block;height:30px">上传附件：</span>
      <div style="width:100%;display:flex;flex-wrap:wrap;">
        <div v-for="(item, index) in filearr1" :key="index" style="width:20%;padding:0 5px;">
          <uploadpic :imagefile.sync="filearr1[index]" />
        </div>
      </div>
    </div>
    <div style="margin:20px auto;text-align:center;">
      <mt-button type="primary" style="width:90%;height:36px;font-size:14px;" @click="submitannouce">发布公告</mt-button>
    </div>
  </div>
</template>

<script>
import picker from '~/components/picker.vue'
import picker2 from '~/components/picker2.vue'
import uploadpic from '~/components/uploadpic.vue'
export default {
  components: {
    uploadpic,
    picker,
    picker2
  },
  data () {
    return {
      ts: this.newStore(),
      firstarr: [],
      usedetail: '',
      filename: {
        name: '点我上传'
      },
      filearr1: [{}, {}, {}, {}, {}],
      annouce: {
        title: '',
        context: '',
        user: [],
        username: '',
        msgtype: ''
      },
      level: []
    }
  },
  computed: {},
  mounted () {
    //     if (this.$route.query.detail)
    //       this.annouce = JSON.parse(this.$route.query.detail)
    if (this.$route.query.detail) {
      this.annouce = JSON.parse(this.$route.query.detail)
    }
    this.getcodeData()
  },

  created () { },

  methods: {
    getlevelval (val) {
      console.log(val)
      this.annouce.msgtype = val.showname
    },

    getcodeData () {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0601',
        codetype: '06'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.olddataList = ts.d.data.operation1
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          const a = {}
          a.showname = ts.d.data.operation1[index].hash.code_name
          a.showid = ts.d.data.operation1[index].hash.code_id
          this.level.push(a)
        }
      })
    },
    //点击提交按钮
    submitannouce () {
      if (this.annouce.title == '' || this.annouce.title == undefined) {
        this.$messagebox('提示', '请输入公告标题')
        return
      }
      if (this.annouce.context == '') {
        this.$messagebox('提示', '请输入公告内容')
        return
      }
      const req = {
        handle:
          '0191283F93927EDB050783D3551EBA10520C55FD7F8BC16E55D7F45B0EB9C8BD',
        userid: this.annouce.user,
        title: this.annouce.title,
        context: this.annouce.context,
        username: this.annouce.username,
        msgtype: this.annouce.msgtype,
        fileurl: this.posturl(this.filearr1),
        filename: this.postname(this.filearr1)
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.$messagebox('提示', '发布成功').then(action => {
            this.$router.push({
              name: 'announcement',
              qery: {
                name: '公告中心'
              }
            })
          })
        }
      })
    },

    option () {
      this.$router.push({
        name: 'announcement',
        query: {
          name: ''
        }
      })
    },
    posturl (arr) {
      const a = []
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url)
      }
      return a
    },
    // 公共方法图片数组转名称数组
    postname (arr) {
      const b = []
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name)
      }
      return b
    },
    closeTouch () {
      document
        .getElementsByTagName('body')[0]
        .addEventListener('touchmove', this.handler, { passive: false }) //阻止默认事件
    },
    openTouch () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false }) //打开默认事件
    },

    getpicval (val) {
      //console.log(val, 'val')
      this.getpicval2 = val
    }
  }
}
</script>

<style>
html,
body,
#app {
  height: 100%;
  background-color: #f3f3f3;
}
.he {
  display: flex;
  justify-content: space-between;
}
.bgc_white {
  background-color: #fff;
}
.p_10 {
  padding: 10px;
}
.border_b {
  border-bottom: 1px solid #f3f3f3;
}
.pb_10 {
  padding-bottom: 10px;
}
.pt_10 {
  padding-top: 10px;
}
.border_t {
  border-top: 2px solid #26a2ff;
}
.width_90 {
  width: 94%;
}
.margin_center {
  margin: 20px auto 0 auto;
}
.fw {
  font-weight: bold;
}
.img_tj {
  width: 40px;
  height: 40px;
}
.weizhi {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>